<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Java API for WebSocket (JSR-356)</title>
</head>
<body>
<script type="text/javascript" src="../../js/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/sockjs/sockjs-1.1.0.min.js"></script>
<script type="text/javascript">
    var websocket = null;
    if ('WebSocket' in window) {
        //Websocket的连接
        websocket = new WebSocket("ws://localhost:8080/webSocket?userName=${userName}");//WebSocket对应的地址
    }
    else if ('MozWebSocket' in window) {
        //Websocket的连接
        websocket = new MozWebSocket("ws://localhost:8080/webSocket?userName=${userName}");//SockJS对应的地址
    }
    else {
        //SockJS的连接
        websocket = new SockJS("http://localhost:8080/webSocket?userName=${userName}");    //SockJS对应的地址
    }
    websocket.onopen = onOpen;
    websocket.onmessage = onMessage;
    websocket.onerror = onError;
    websocket.onclose = onClose;

    function onOpen(openEvt) {
        //alert(openEvt.Data);
    }

    function onMessage(evt) {
        var userSelect = "<option value=\"\" >请选择</option>";
        var mySocketMessage = JSON.parse(evt.data);
        var userArray = mySocketMessage.userList;
        console.log(mySocketMessage);
        var message =  $("#message").html();
        $("#message").html(message + mySocketMessage.message +"</br>");
        for(var i = 0; i < userArray.length; i++){
            userSelect += "<option value=\""+userArray[i].id+"\">"+userArray[i].name+"</option>";
        }
        console.log(userSelect);
        $("#toUser").empty();
        $("#toUser").append(userSelect);
    }
    function onError() {
        alert("发生错误了！");
    }
    function onClose() {
    }

    function doSend() {
        if (websocket.readyState == websocket.OPEN) {
            var msg = document.getElementById("inputMsg").value;
            var socketMessage  = {};
            socketMessage.message = msg;
            socketMessage.messageType = $("#messageType").find("option:selected").val();;
            socketMessage.toUser = $("#toUser").find("option:selected").val();
            websocket.send(JSON.stringify(socketMessage));//调用后台handleTextMessage方法
            $("#inputMsg").val("");
            // alert("发送成功!");
        } else {
            alert("连接失败!");
        }
    }

    window.close = function () {
        websocket.onclose();
    }
</script>
<div>
    <input id="userId" value="${userId}" type="hidden"/>
    <label for="messageType">聊天类型</label>
    <select id="messageType" name="messageType">
        <option value="group">群聊</option>
        <option value="person">私聊</option>
    </select>
</div>
<div>
    <label for="toUser">私聊对象</label>
    <select id="toUser" name="toUser">
        <option value="" >请选择</option>
    </select>
</div>


<div>
    请输入：<textarea rows="3" cols="100" id="inputMsg" name="inputMsg"></textarea>
    <button onclick="doSend();">发送</button>
</div>

<div>
	<label id="message">

	</label>
</div>
</body>
</html>
